<template>
  <view class="container">
    <!-- 加群问题模块 -->
    <view class="outer-box">
      <text class="question-text">问题:只收一起玩的玩家</text>
      <view class="input-wrap">
        <input 
          class="answer-input" 
          type="text" 
          placeholder="请输入加群问题的回答" 
          placeholder-style="color: #C9C9C9;"
		  maxlength="30"
          v-model="answerValue"
        />
        <text class="word-count">{{ answerValue.length }}/30</text>
      </view>
    </view>
    
    <!-- 入群介绍模块 -->
    <view class="intro-container">
      <text class="intro-title">入群后在群聊中发送进群介绍 (选填)</text>
      <textarea 
        class="intro-textarea" 
        placeholder="和群里的大家打个招呼吧～" 
        placeholder-style="color: #C9C9C9;"
        maxlength="300"
        v-model="introValue"
      ></textarea>
      <view class="footer">
        <text class="word-count">{{ introValue.length }}/300</text>
      </view>
    </view>
    
    <!-- 底部提交按钮 -->
    <view class="footer-btn">
      <button class="submit-btn" @click="submitApply">提交申请</button>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue';

// 数据定义
const answerValue = ref(''); // 加群问题回答
const introValue = ref('');  // 入群介绍内容

// 提交申请
const submitApply = () => {
  // 简单校验
  if (!answerValue.value.trim()) {
    uni.showToast({
      title: '请回答加群问题',
      icon: 'none'
    });
    return;
  }
  
  // 模拟提交逻辑
  console.log('提交申请:', {
    answer: answerValue.value,
    introduction: introValue.value
  });
  
  uni.showLoading({
    title: '提交中...'
  });
  
  // 模拟接口延迟
  setTimeout(() => {
    uni.hideLoading();
    uni.showToast({
      title: '申请已提交',
      icon: 'none'
    });
    
    // 提交成功后返回上一页
    setTimeout(() => {
      uni.navigateBack();
    }, 1500);
  }, 1000);
};
</script>

<style lang="less" scoped>
.container {
  padding: 15px; 
}
.outer-box {
  background-color: #FFF;
  border: 1px solid #E5E5E5; 
  border-radius: 6px;
  padding: 12px;
  min-height: 100px; 
  margin-bottom: 15px; 
}
.question-text {
  font-size: 16px;
  color: #333;
  display: block; 
  margin-bottom: 8px; 
}
.input-wrap {
  position: relative;
  width: calc(100% + 10px); 
  left: -5px; 
}
.answer-input {
  width: 100%;
  height: 40px; 
  line-height: 40px;
  border: 1px solid #ECECEC;
  border-radius: 4px;
  padding: 0 8px;
  font-size: 14px;
  color: #333;
  box-sizing: border-box; 
}
.word-count {
  color: #999;
  font-size: 12px;
}
.answer-input + .word-count {
  position: absolute;
  right: 10px;
  bottom: -22px; 
}

.intro-container {
  background-color: #FFF;
  border: 1px solid #E5E5E5; 
  border-radius: 6px;
  padding: 12px;
  margin-bottom: 25px; 
}
.intro-title {
  font-size: 16px;
  color: #333;
  display: block;
  margin-bottom: 8px;
}
.intro-textarea {
  width: 100%;
  height: 200px; 
  border: 1px solid #ECECEC;
  border-radius: 4px;
  padding: 8px;
  font-size: 14px;
  color: #333;
  box-sizing: border-box;
  resize: none; 
}
.footer {
  display: flex;
  justify-content: flex-end; /* 右对齐字数统计 */
  align-items: center;
  margin-top: 8px;
}

.footer-btn {
  padding: 0 15px;
}
.submit-btn {
  width: 100%;
  height: 44px;
  line-height: 44px;
  background-color: #07C160;
  color: #FFF;
  border-radius: 22px;
  font-size: 16px;
  border: none;
}
</style>